<template>
  <a-drawer
    title="打印预览"
    placement="right"
    width="100%"
    :closable="true"
    :destroyOnClose="true"
    :visible="show"
    :get-container="false"
    wrapClassName="ch-wrap"
    @close="onClose"
  >
    <div class="print-btn-box">
      <a-button
        type="primary"
        size="small"
        @click="onPrint"
        :loading="startPrint"
      >
        打印
      </a-button>
    </div>
    <section style="margin: 10px 0" ref="print">
      <div v-for="(item, index) in list" :key="item.JobTempletID">
        <div
          :class="[
            !item.noData ? 'print-inside' : '',
            item.IsPaging ? 'print-box' : '',
          ]"
          v-if="!item.noData"
        >
          <div
            :class="item.IsPaging ? 'table-margin' : ''"
            v-if="
              item.itemList != null &&
              item.itemList.length != 0 &&
              item.JobTempletIndex == 1
            "
          >
            <!-- 需要打印且展示的部分 Start -->
            <batch-box
              v-if="item.TableType == 1"
              :list="item.itemList"
              :item="item"
              :mateCurrentInfo="mateCurrentInfo"
            ></batch-box>
            <!-- 需要打印且展示的部分 End  -->

            <!-- 聚合表单 Start -->
            <polymerize-box
              v-if="item.TableType == 2 || item.TableType == 3"
              :list="item.itemList"
              :item="item"
              :headerList="item.titleList"
              :mateCurrentInfo="mateCurrentInfo"
            ></polymerize-box>
            <!-- 聚合表单 End -->
          </div>
          <div
            v-if="
              item.itemList != null &&
              item.itemList.length != 0 &&
              item.JobTempletIndex != 1
            "
          >
            <!-- 需要打印且展示的部分 Start -->
            <batch-box
              v-if="item.TableType == 1"
              :list="item.itemList"
              :item="item"
              :lastItem="list[index - 1]"
              :mateCurrentInfo="mateCurrentInfo"
            ></batch-box>
            <!-- 需要打印且展示的部分 End  -->

            <!-- 聚合表单 Start -->
            <polymerize-box
              v-if="item.TableType == 2 || item.TableType == 3"
              :list="item.itemList"
              :item="item"
              :lastItem="list[index - 1]"
              :headerList="item.titleList"
              :mateCurrentInfo="mateCurrentInfo"
            ></polymerize-box>
            <!-- 聚合表单 End -->
          </div>
        </div>
      </div>
    </section>
  </a-drawer>
</template>

<script>
import BatchBox from "@/views/batch-printing/children/batch-table-box.vue";
import PolymerizeBox from "@/views/batch-printing/children/polymerize-table-box.vue";
import store from "@/store/index";

import { mapState } from "vuex";
export default {
  props: ["show", "list", "mateCurrentInfo"],
  components: {
    BatchBox,
    PolymerizeBox,
  },
  computed: {
    ...mapState(["startPrint"]),
  },
  data() {
    return {
      key: 0,
      isLoading: false, //是否打印完成
    };
  },
  methods: {
    /* 关闭打印 */
    onClose() {
      this.$emit("updateShow", false);
    },
    /* 打印*/
    onPrint() {
      this.$store.commit("upPrintShow", true);
      // window.print()
      this.$print(this.$refs.print);
    },
  },
  mounted() {
    console.log(store.state.startPrint);
    window.addEventListener("beforeprint", function () {
      console.log("开始打印...");
      // 在这里可以执行一些操作，比如更改页面样式或者显示提示信息
    });
    window.addEventListener("afterprint", () => {
      console.log("打印结束");
    });
  },
  watch: {
    // list: {
    //   handler(newValue, oldValue) {
    //     newValue.map(async (item) => {
    //       if (item.TableType == 1) {
    //         let res = await getJobRecordDetailGroupList(item.JobRecordID);
    //         let list = res.Data.sort((a, b) => {
    //           return a.JobItemIndex - b.JobItemIndex;
    //         });
    //         list.map((item) => {
    //           item.JobGroup = item.JobGroup.split("。");
    //           item.JobRecordDetailList = item.JobRecordDetailList.sort(
    //             (a, b) => {
    //               return a.JobItemIndex - b.JobItemIndex;
    //             }
    //           );
    //         });
    //         item.batchDetailList = list;
    //         this.key++;
    //       } else {
    //         let res = await getJobRecordDetailList(item.JobRecordID);
    //         let stagingHeader = res.Data.filter(
    //           (item) => item.JobRecordDetailIndex == 1
    //         );
    //         stagingHeader = stagingHeader.sort((a, b) => {
    //           return a.JobItemIndex - b.JobItemIndex;
    //         });
    //         let hList = polymerizeTitle.handleTitleList(stagingHeader);
    //         /* 先根据 JobRecordDetailIndex 把每一项排序 */
    //         let stagingBatchDetailList = res.Data.sort((a, b) => {
    //           return a.JobRecordDetailIndex - b.JobRecordDetailIndex;
    //         });
    //         /* 通过 pop方法获取数组最后一位确定共几行 */
    //         let batchDetailNum =
    //           stagingBatchDetailList[stagingBatchDetailList.length - 1]
    //             .JobRecordDetailIndex;
    //         /* 定义一个空数组 */
    //         let detailList = [];
    //         /* 通过遍历获取最大值添加列表中相对应的JobRecordDetailIndex项为一行 push进detailList数组 */
    //         for (let index = 1; index <= batchDetailNum; index++) {
    //           let list = stagingBatchDetailList.filter(
    //             (fitm) => fitm.JobRecordDetailIndex == index
    //           );
    //           detailList.push(list);
    //         }
    //         /* 遍历结束后将子项排序后赋值 */
    //         let list = detailList.map((ditm) => {
    //           ditm.sort((a, b) => {
    //             return a.JobItemIndex - b.JobItemIndex;
    //           });
    //           ditm = polymerizeTitle.handleTitleList(ditm);
    //           return ditm;
    //         });
    //         item.polyHeaderList = hList;
    //         item.batchDetailList = list;
    //         this.key++;
    //       }
    //     });
    //   },
    //   deep: true,
    // },
  },
};
</script>

<style lang="less" scoped>
.ch-wrap {
  position: relative;
}

.print-btn-box {
  position: fixed;
  top: 1.25rem;
  right: 5%;
}

/deep/.ant-drawer-wrapper-body {
  display: flex;
  flex-direction: column;

  .ant-drawer-body {
    flex: 1;
    padding: 0.625rem;
    overflow-y: auto;

    .drawer-section {
      margin-bottom: 0.625rem;
    }
  }
}
</style>
<style media="print">
@media print {
  /* 修改后的生效样式 */
  .batch-box tr,
  .polymerize-box tr {
    display: block !important;
    margin-bottom: 10px;
  }

  .batch-box td,
  .polymerize-box td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }

  .batch-box td:nth-child(even),
  .polymerize-box td:nth-child(even) {
    padding-left: 2em !important;
    border-top: none !important;
  }
  /* 保持原有其他样式... */
  @page {
    margin: 5mm 10mm 15mm 10mm;
    size: A4 landscape;
    color: #000000 !important;
    @bottom-center {
      content: counter(page) "/" counter(pages);
    }
  }
  tfoot {
    display: table-footer-group;
  }

  .batch-thead {
    width: 100% !important;
    display: block !important;
  }

  .thead-box {
    display: block !important;
  }

  .table-name {
    width: 100% !important;
    display: block !important;
  }

  .table-name .table-name-td {
    width: 100% !important;
    text-align: center !important;
  }

  .print-box {
    page-break-after: always !important;
  }

  .header-show,
  .header-space,
  .footer,
  .footer-space {
    display: block !important;
  }
}
</style>
